<template>
<div>
  <div class="jz ddisp" style="width: 1200px;min-width: 1200px;padding: 20px">
    <div class="dyy topdq" style="width: 180px">
      <div  class="ba jz_flex" style="">
        职教视点
      </div>
      <div class="tabAdd">
        <div @click="add(yuanxiaoxuanchuanList)" class="tabHover">
          <span class="animate__animated animate__bounce">院校宣传</span>
        </div>
        <div @click="add(zhuanyejieshaoList)" class="tabHover">
          <span class="animate__animated animate__bounce">专业介绍</span>
        </div>
        <div @click="add(xiaoyuanzixunList)" class="tabHover">
          <span class="animate__animated animate__bounce">校园资讯</span>
        </div>
        <div @click="add(peixunkechengList)" class="tabHover">
          <span class="animate__animated animate__bounce">培训课程</span>
        </div>
        <div @click="add(renwuList)" class="tabHover">
          <span class="animate__animated animate__bounce">人物</span>
        </div>
        <div @click="add(zhishifenxiangList)" class="tabHover">
          <span class="animate__animated animate__bounce">知识分享</span>
        </div>
        <div @click="add(qitaList)" class="tabHover">
          <span class="animate__animated animate__bounce">其他</span>
        </div>
      </div>
    </div>
    <div class="topdq" style="width: calc(100% - 180px)">
      <div class="wh_9 jz">
        <div class="blue_jb pad_10_0">
          <span class="mag_l-10 xsgb" @click="pageTo(item)" v-for="(item,index) in daohang" :key="index">{{ item.tit }} > </span>
        </div>
        <div class="ddisp hh mag_t-20">
          <div class="wh_2-5" v-for="(item,index) in shidianList" :key="index">
            <div class="wh_9 jz">
              <div class="img_100">
                <img style="height: 110px" :src="$store.state.imageUrltitle+item.image" alt="">
              </div>
              <div class="ccsl_1 hh" style="height: 18px">{{item.title}}</div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
</template>

<script>
import {getArticle} from "@/api/api";

export default {
  name: "shidian",
  data(){
    return{
      daohang:[
        {tit:'首页',path:'homeList'},
        {tit:'职教视点',path:'shidian'}
      ],
      shidianList:[],
      qitaList:[],
      zhishifenxiangList:[],
      renwuList:[],
      peixunkechengList:[],
      xiaoyuanzixunList:[],
      zhuanyejieshaoList:[],
      yuanxiaoxuanchuanList:[]
    }
  },
  methods:{
    shidian(e){
      let params = {
        cid:e
      };
      getArticle(params).then(res => {
        if (res.status==200) {
          this.shidianList=res.data
        } else {
          console.log(res.msg)
        }
      });
    },
    qita(e){
      let params = {
        cid:e
      };
      getArticle(params).then(res => {
        if (res.status==200) {
          this.qitaList=res.data
        } else {
          console.log(res.msg)
        }
      });
    },
    zhishifenxiang(e){
      let params = {
        cid:e
      };
      getArticle(params).then(res => {
        if (res.status==200) {
          this.zhishifenxiangList=res.data
        } else {
          console.log(res.msg)
        }
      });
    },
    renwu(e){
      let params = {
        cid:e
      };
      getArticle(params).then(res => {
        if (res.status==200) {
          this.renwuList=res.data
        } else {
          console.log(res.msg)
        }
      });
    },
    peixunkecheng(e){
      let params = {
        cid:e
      };
      getArticle(params).then(res => {
        if (res.status==200) {
          this.peixunkechengList=res.data
        } else {
          console.log(res.msg)
        }
      });
    },
    xiaoyuanzixun(e){
      let params = {
        cid:e
      };
      getArticle(params).then(res => {
        if (res.status==200) {
          this.xiaoyuanzixunList=res.data
        } else {
          console.log(res.msg)
        }
      });
    },
    zhuanyejieshao(e){
      let params = {
        cid:e
      };
      getArticle(params).then(res => {
        if (res.status==200) {
          this.zhuanyejieshaoList=res.data
        } else {
          console.log(res.msg)
        }
      });
    },
    yuanxiaoxuanchuan(e){
      let params = {
        cid:e
      };
      getArticle(params).then(res => {
        if (res.status==200) {
          this.yuanxiaoxuanchuanList=res.data
        } else {
          console.log(res.msg)
        }
      });
    },
    add(e){
      console.log(e)
      this.shidianList = e
    },
    pageTo(e){
      if (e.path=='shidian'){
        this.shidian(375)
      }else{
        this.$router.push(e.path)
      }
    },
  },
  mounted() {
    this.shidian(375)
    this.qita(415)
    this.zhishifenxiang(414)
    this.renwu(413)
    this.peixunkecheng(412)
    this.xiaoyuanzixun(411)
    this.zhuanyejieshao(410)
    this.yuanxiaoxuanchuan(409)
  },
  // watch:{
  //   $route(n,o){
  //     if(n.fullPath !== o.fullPath){ //监听路由参数是否变化
  //        location.reload()
  //       // console.log('???????????????')
  //       // this.shidian(375)
  //       // this.shidianList=this.shidianList
  //       //强制刷新页面this.获取列表页()
  //     }
  //   }
  // }
}
</script>

<style scoped>
.ba{
  background-image: url('../../assets/img/shidian.png');
  font-size: 24px;
  height: 74px;
  color: white;
}
.tabHover:hover>span{
  padding: 10px 40px;
  background-color: #4f80f0;
  border-radius: 10px;
  color: white;
  cursor: pointer;
}
.tabAdd{
  background-color: #f0f2fc;
}
.tabAdd>div{
  height: 60px;
  display: flex;
  justify-content:center;
  align-items: center;
}
</style>